<template>
  <div class="container">
    <!-- 频道下拉框,清空功能clearable -->
    <!-- v-model="channelId"无意义,绑定组件内部数据 -->
    <!-- 不能使用v-model="value"来选择对应频道,不能修改 -->
    <el-select @change="changeChannel" clearable :value="value" placeholder="请选择">
      <el-option v-for="item in channelOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "my-channel",
  // 接收父传子频道id数据
  props: ["value"],
  data() {
    return {
      // channelId: null,
      channelOptions: []
    };
  },
  created() {
    this.getChannels();
  },
  methods: {
    // 频道选择
    changeChannel(channelId) {
      // 不能传空字符串,可以改成null
      //   if (this.channelId === "") this.channelId = null;
      // 把频道id提交给父组件@input
      if (channelId === "") channelId = null;
      this.$emit("input", channelId);
    },
    // 获取下拉列表数据
    async getChannels() {
      const {
        data: { data }
      } = await this.$http.get("/channels");
      // console.log(res.data.data.channels);
      this.channelOptions = data.channels;
    }
  }
};
</script>

<style>
</style>